<template>
  <div class="showDetail">
    <el-dialog :title="$t('colModalTransDtl.tdetail')" :visible.sync="showDialog" @close="$emit('update:showDetailInfo', false)"
               :showDetailInfo="showDetailInfo">
      <el-form class="small-space" ref="adjustTypeFrom" label-position="left" label-width="35%">
        <dialog-wrapper width="600"> 
          <el-form-item :label="$t('colModalTransDtl.merchant')+':'">
            <p style="margin:0px">{{DetailInfo.mch_id}}</p>
          </el-form-item>
          <el-form-item :label="$t('colModalTransDtl.userid')+':'">
            <p style="margin:0px">{{DetailInfo.user_id}}</p>
          </el-form-item>
          <el-form-item :label="$t('colModalTransDtl.ordernumber')+':'">
            <p style="margin:0px">{{DetailInfo.id}}</p>
          </el-form-item>
          <el-form-item v-if="DetailInfo.handler !== 'auto'" :label="$t('colModalTransDtl.username')+':'">
            <p style="margin:0px">{{DetailInfo.handler}}</p>
          </el-form-item>
          <el-form-item v-if="DetailInfo.handler !== 'auto'" :label="$t('colModalTransDtl.comments')+':'">
            <p style="margin:0px">{{DetailInfo.msg}}</p>
          </el-form-item>
          <el-form-item :label="$t('colModalTransDtl.hydraOrdernum')+':'">
            <p style="margin:0px">{{DetailInfo.out_trade_no}}</p>
          </el-form-item>
          <el-form-item :label="$t('colModalTransDtl.orderAmount')+':'">
            <p style="margin:0px">{{DetailInfo.total_fee}}</p>
          </el-form-item>
          <el-form-item :label="$t('colModalTransDtl.realAmount')+':'">
            <p style="margin:0px">{{DetailInfo.real_amount}}</p>
          </el-form-item>
          <el-form-item :label="$t('colModalTransDtl.creationTime')+':'">
            <p style="margin:0px">{{DetailInfo.created_at}}</p>
          </el-form-item>
          <el-form-item :label="$t('colModalTransDtl.notif_status')+':'">
            <p style="margin:0px">{{ NotifyStatusArray[DetailInfo.notify_status] }}</p>
          </el-form-item>
        </dialog-wrapper>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import DialogWrapper from '@/components/DialogWrapper'
  import { getOrderDetail } from '@/api/merchant'
  export default {
    components: { DialogWrapper },
    data() {
      return {
        DetailInfo: {},
        showDialog: this.showDetailInfo,
        NotifyStatusArray: ['未回调', '回调失败', '回调成功']
      }
    },
    props: {
      showDetailInfo: {
        type: Boolean,
        default: false
      },
      order_id: {
        type: String
      }
    },
    created(){
      if(this.order_id){
        this.getRechargeDetail()
      }
    },
    methods: {
      getRechargeDetail(){
        getOrderDetail(this.order_id).then(res => {
          if(res.status === 0) {
            this.DetailInfo = res.data
          }
        })
      }
    },
    watch: {
      showDetailInfo() {
        this.showDialog = this.showDetailInfo
      }
    }
  }
  
  export const enTransModalDtl = {    
      tdetail: 'Order Detail',
      merchant: 'Merchant',
      userid: 'User ID',
      ordernumber: 'Order No.',
      username: 'Processed by',
      comments: 'Comment',
      hydraOrdernum: 'Hydra Order number',
      orderAmount: 'Order Amount',
      realAmount: 'Real Amount',
      creationTime: 'Created At',
      notif_status: 'Notification Status'
  }

  export const zhTransModalDtl = {    
      tdetail: '订单详情',
      merchant: '商户',
      userid: '用户ID',
      ordernumber: '订单号',
      username: '处理人',
      comments: '处理意见',      
      hydraOrdernum: 'Hydra订单号',
      orderAmount: '订单金额',
      realAmount: '真实金额',
      creationTime: '订单创建时间',
      notif_status: '通知状态'
   }
</script>
